@use 'src/styles/abstracts' as *;

.ResizeElement {
  position: relative;
  display: flex;
  overflow: scroll;
  &__gutter {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    transition: all 0.25s cubic-bezier(1,.14,1,.5);
    &__left {
      cursor: col-resize;
      height: 100%;
      left: 0;
      top: 0;
      box-shadow: inset 2px 0 0 0 $primary-color-20;
    }
    &__right {
      cursor: col-resize;
      height: 100%;
      right: 0;
      top: 0;
      box-shadow: inset 2px 0 0 0 $primary-color-20;
    }
    &__top {
      cursor: row-resize;
      width: 100%;
      left: 0;
      top: 0;
      box-shadow: inset 0 2px 0 0 $primary-color-20;
    }
    &__bottom {
      cursor: row-resize;
      width: 100%;
      left: 0;
      bottom: 0;
      box-shadow: inset 0 -2px 0 0 $primary-color-20;
    }
    &:hover, &:active {
      background-color: $primary-color-50;
      box-shadow: unset;
    }
  }
  & > .ResizableElement {
    width: 100%;
    height: 100%;
  }
}
